<template>
	<view class="page">
		<view class="search-wrap">
			<view class="search" @click="serchName">
				<image src="/static/img/search.png"></image>
				<input type="text" placeholder="商品名称/关键词" v-model="bizproname" placeholder-style="margin-left:20rpx;font-size:28rpx;"  />
				<view class="bar"></view>
			</view>
			<text class="search-text" @click="serchName" >搜索</text>
		</view>
		
		<view class="recommend-content">
			<scroll-view scroll-x style="width: 600rpx;">
				<view class="recommend-wrap">
					<view class="recommend-item"
					 v-for="(item,index) in specialList" :key="index" @click="specialTitle(item.id)"
					 style="margin-right: 30rpx;"
					 >
						<text :style="specialTitleIndex == item.id? 'color: #FEB147':''" >{{item.title}}</text>
						<view class="line" v-if="specialTitleIndex == item.id"></view>
					</view>
				</view>
			</scroll-view>
			
			<image src="/static/img/more.png" @click="toCategory"></image>
		</view>
		<scroll-view scroll-y class="goods-scroll"  @scroll="scroll" :scroll-top="scrollTop">
			<view class="goods-list">
				<view class="goods-list-item" v-for="(item,index) in goodsList" :key="index" @click="toDetail(item.b_id)">
					<image :src="item.imgurl"></image>
					<text class="goods-name">{{item.b_name}}</text>
					<view class="tag-view">
						<text class="tag">{{item.label[0]}}</text>
						<text class="tag">{{item.label[1]}}</text>
					</view>
					<text class="price">¥{{item.sale_price}}</text>
					<text class="high-price">原价：{{item.old_price}}</text>
					<text class="sell-count">销量：{{item.real_num}}件</text>
					<text></text>
				</view>
				<text class="noyet" v-if ="!noyet == false"  >暂无数据</text>
				<text class="noyet" v-if ="noyet == false"  >没有更多商品了~</text>
				<!-- <text class="more">点击查看更多商品</text> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { request } from "../../request/index.js";
	import SearchInput from '@/components/SearchInput.vue';
	export default {
		onLoad: function(options) {
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
			//分享参数头url
			let url = this.$api.headurl
			this.$hshare.gethShareParam(url+'/#/pages/search/SpecialDisplay')
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
			this.getSpecialList();
			
			if(options.spearea_id!=null||options.spearea_id!=''){
				this.specialTitle(options.spearea_id);
			}else{
				this.getGoodsList();
			}
			
		},
		data() {
			return {
				specialName: ['专区名称', '专区名称', '专区名称', '专区名称','专区名称','专区名称', '专区名称', '专区名称','专区名称'],
				specialTitleIndex: 0,
				specialList: [],
				goodsList: [],
				scrollTop: 0,
				old: {
				    scrollTop: 0
				    },
				bizproname: '',
				noyet:false,//暂无数据显示状态
			}
		},
		components: {
			SearchInput
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			scroll: function(e) {
			  
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
						this.scrollTop = this.old.scrollTop
						this.$nextTick(function() {
							this.scrollTop = 0
						});
			},
			//专区名称
			specialTitle(spearea_id) {
				this.goTop()
				this.specialTitleIndex = spearea_id;
				this.$api.getGoodsList({spearea_id:spearea_id}).then(res => {
					if(res.data.status == true){
						this.goodsList = res.data.data;
						if(res.data.data == ''){
							this.noyet =true
						}else{
							this.noyet =false
						}
					}
					
				})
			},
			//商品详情
			toDetail(id) {
				 uni.navigateTo({  
					 url: '/pages/goods/GoodsDetail?id=' + id
				 })
			},
			toCategory() {
				uni.switchTab({
					url: '/pages/category/Category'
				})
			},
			// 获取专区标题列表
			 getSpecialList() {
				 this.$api.getIcon({
				 				
				 }).then(result => {
				 this.specialList = result.data.data;
				 })
			 },
			 // 专区展示商品列表
			 getGoodsList() {
				 this.$api.getGoodsList({
				 				
				 }).then(result => {
					 this.goodsList = result.data.data;
				 })
			 },
			 //商品名称搜索
			serchName(){
				
				uni.navigateTo({
					url: "/pages/search/Search"
				})
			}
		}
	}
</script>

<style>
	.recommend-wrap {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		white-space: nowrap;
		width: 652rpx;
		height: 80rpx;
	}
	.page {
		padding-top: calc(var(--status-bar-height));
		width: 100%;
		height: calc(100vh - var(--status-bar-height));
	}
	.search-wrap {
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 72rpx;
	}
	.back {
		width: 14rpx;
		height: 26rpx;
		margin-left: 30rpx;
	}
	.search {
		position: relative;
		display: flex;
		align-items: center;
		width: 536rpx;
		height: 72rpx;
		margin-left: 40rpx;
	}
	.search input {
		width: 100%;
		height: 100%;
	}
	.search image {
		width: 32rpx;
		height: 32rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.search-text {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254,177,71,1);
		margin-left: 30rpx;
	}
	.bar {
		position: absolute;
		width: 568rpx;
		height: 10rpx;
		border: 1rpx solid rgba(254,177,71,1);
		border-top: none;
		margin-top: 30rpx;
	}
	.recommend-content {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 710rpx;
		height: 125rpx;
		font-size: 30rpx;
		margin-left: 20rpx;
		background: #fff;
		border-bottom: 1rpx solid #eee;
	}
	.recommend-item {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.recommend-content image {
		width: 32rpx;
		height: 24rpx;
	}
	.goods-list {
		width: 710rpx;
		margin-left: 20rpx;
		background: #fff;
	}
	.goods-list-item {
		position: relative;
		width: 670rpx;
		height: 200rpx;
		margin-left: 20rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		background: rgba(255,255,255,1);
		box-shadow:0rpx -4rpx 8rpx 0rpx rgba(250,250,250,0.95), 0px 4px 8px 0px rgba(204,204,204,1);
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	.goods-list-item image {
		display: block;
		width: 160rpx;
		height: 160rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	/* .goods-name {
		display: block;
		position: absolute;
		top: 27rpx;
		left: 210rpx;
		height: 31rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51,51,51,1);
	} */
	.goods-name {
		display: block;
		position: absolute;
		top: 27rpx;
		left: 210rpx;
		/* height: 31rpx; */
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51,51,51,1);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		width: 228px;
		font-weight: bold;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.tag-view{
		width: 440rpx;
		height: 28rpx;
		position: absolute;
		top: 77rpx;
		left: 210rpx;
	}
	.tag {
		display: flex;
		align-items: center;
		justify-content: center;
		/* width: 108rpx; */
		height: 28rpx;
		background: rgba(222,245,255,1);
		border: 1rpx solid rgba(185,233,255,1);
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(72,180,231,1);
		float: left;
		margin-right: 20rpx;
		padding: 0 10rpx;
	}
	.tag-one {
		position: absolute;
		top: 77rpx;
		left: 210rpx;
	}
	.tag-two {
		position: absolute;
		top: 77rpx;
		left: 332rpx;
	}
	.price {
		position: absolute;
		top: 117rpx;
		left: 212rpx;
		width: 233rpx;
		height: 23rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight:500;
		color:rgba(254,177,71,1);
	}
	.high-price {
		position: absolute;
		top: 155rpx;
		left: 210rpx;
		height: 21rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
		text-decoration: line-through;
	}
	.sell-count {
		position: absolute;
		top: 155rpx;
		right: 50rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102,102,102,1);
	}
	.more {
		width: 221rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254,177,71,1);
		line-height: 192rpx;
		margin-left: 245rpx;
		text-decoration: underline;
	}
	.noyet {
		width: 221rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:#adadad;
		line-height: 192rpx;
		margin-left: 290rpx;
		/* text-decoration: underline; */
	}
	.goods-scroll {
		width: 100%;
		height: 1300rpx;
	}
	.line {
		width: 28rpx;
		height: 4rpx;
		background: rgba(254,177,71,1);
		border-radius: 2rpx;
		margin: 0 auto;
	}
</style>
